<template>

	<view class="posts_item " @tap="clickHandler">
		<view class="posts_head">
			<view class="avatar_view">
				<u-avatar size="60" :src="avatar"></u-avatar>
			</view>
			<view class="posts_info">
				<view class="">
					<text style="posts_info_name">{{nickName}}</text>
				</view>
				<view class="posts_info_desc" style="font-size: 23rpx;color: #c8c8c8;">

					<text>{{$u.timeFrom(time, 'yyyy-mm-dd')}}</text>
					<u-image style="margin-left: 10rpx;" :width="20" :height="26" src="../../static/icon/mobile.png">
					</u-image>
					<text style="margin-left: 5rpx;" class="txt">{{mobileType}}</text>

				</view>
			</view>
			<view class="arrow-down_view" @tap.stop="openMenu">
				<u-icon name="arrow-down" color="#c8c8c8" size="28"></u-icon>
			</view>
		</view>
		<view class="posts_body ">
			
				<view class="posts_content ripple">
				
					
					<u-parse :html="content"></u-parse>
				</view>
				<view class="posts_pic" @tap.stop>
					<u-grid :col="3" :border="false">
				
						<!-- 预占元素，对接后端后改为for循环渲染 -->
						<u-grid-item :custom-style="{padding: '2rpx 0'}" v-for="(item,index) in imgList" :key="index">
							<u-image @click="imgClick(index)" width="180rpx" height="180rpx"
								:src="item">
							</u-image>
						</u-grid-item>
				
					</u-grid>
				
				</view>
				
				
			
			<view class="posts_comments ">
				<view class="posts_comments_content ripple">
					<view class="comments_content_tag">
						<text style="padding-left: 12rpx;padding-right: 12rpx;border-radius: 4rpx;">{{comments.dzNum}}赞</text>
					</view>
					<view class="" style="height: 30rpx;">
			
					</view>
					<view class="posts_comments_content_text">
						<text class="comments_name">{{comments.nickname}}：</text>
						<text>{{comments.content}}</text>
					</view>
				</view>
			</view>
			<view class="" style="padding-left: 30rpx; padding-right: 30rpx;">
				<u-gap height="1" bg-color="#f5f5f5"></u-gap>
			</view>
			<view class="posts_status" @tap.stop>
				<view class="posts_status_dz posts_status_align ripple" >
					<u-icon color="#1B975A" size="40" name="thumb-up"></u-icon>
					<text style="color: #1B975A;" class="posts_status_num">{{dzNum}}</text>
				</view>

				<view class="posts_status_pl posts_status_align ripple" >
					<u-icon color="#ababab" size="40" name="chat"></u-icon>
					<text class="posts_status_num">{{commentsNum}}</text>
				</view>
				<view class="posts_status_fz posts_status_align ripple">
					<u-icon color="#ababab" size="40" name="zhuanfa"></u-icon>
					<!-- <text class="posts_status_num">60</text> -->
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		name: "posts",
		data() {
			return {
				
			};
		},
		methods:{
			clickHandler(e){
				console.log(1)
			},
			openMenu(){
				console.log('打开菜单')
			},
			imgClick(e){
				uni.previewImage({
					indicator:true,
					current:e,
					urls:this.imgList,
					success: (res) => {
						
					}
				})
			}
		},
		props:{
			nickName:{
				type:String,
				default:''
			},
			avatar:{
				type:String,
				default:''
			},
			mobileType:{
				type:String,
				default:''
			},
			content:{
				type:String,
				default:''
			},
			imgList:{
				type:Array,
				default:[]
			},
			time:{
				type:Number,
				required:true
			},
			comments:{
				type:Object,
				default:null
			},
			dzNum:{
				type:Number,
				default:0
			},
			commentsNum:{
				type:Number,
				default:0
			}
		}
		// props:['postsNickName','postsAvatar']
	}
</script>

<style lang="scss">
	.posts_item {
		background-color: #FFFFFF;
		.posts_head {
			position: relative;
			display: flex;
			padding-top: 20rpx;
			padding-left: 30rpx;
			align-items: center;

			.avatar_view {}

			.posts_info {
				margin-left: 20rpx;

				.posts_info_desc {
					display: flex;
					flex-direction: row;
					align-items: center;
				}
			}

			.arrow-down_view {
				padding: 30rpx;
				position: absolute;
				right: 5%;
			}
		}

		.posts_body {
			position: relative;

			.posts_content {
				padding: 20rpx 30rpx 0rpx;
				font-size: 30rpx;

			}

			.posts_pic {
				padding: 10rpx 30rpx 20rpx;
				width: 88%;
			}

			.posts_comments {
				width: 100%;
				padding: 10rpx 30rpx 20rpx;

				.posts_comments_content {
					position: relative;
					border-radius: 8rpx;
					background-color: #eee;

					.comments_content_tag {
						position: absolute;
						background-color: #1B975A;
						color: #fff;
						font-size: 25rpx;
						padding-left: 10rpx;
						padding-right: 10rpx;

					}

					.posts_comments_content_text {
						padding: 10rpx 30rpx 20rpx;

						.comments_name {
							color: #1B975A;
							;
						}
					}

				}
			}

			.posts_status {

				display: flex;
				justify-content: space-around;

				// width: 100%;
				.posts_status_align {
					width: 100%;
					height: 100%;
					padding: 20rpx 0 20rpx;
					display: flex;
					justify-content: center;
					align-items: flex-end;

				}

				.posts_status_num {
					color: #ababab;
					margin-left: 8rpx;
				}
			}

		}
	}
	.ripple {
	    position: relative;
	    //隐藏溢出的径向渐变背景
	    overflow: hidden;
	}
	 
	.ripple:after {
	    content: " ";
	    display: block;
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0;
	    pointer-events: none;
	    //设置径向渐变
	    background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
	    background-repeat: no-repeat;
	    background-position: 50%;
	    transform: scale(10, 10);
	    opacity: 0;
	    transition: transform .3s, opacity .5s;
	}
	 
	.ripple:active:after {
	    transform: scale(0, 0);
	    opacity: .3;
	    //设置初始状态
	    transition: 0s;
	}
	
</style>
